<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>分享</title>
    <!-- 基本框架 -->
    <link rel="stylesheet" href="../../../css/common.css">
    <script src="../../../script/vue.min.js" type="text/javascript"></script>
    <script src="../../../script/frame.js" type="text/javascript"></script>
    <script src="../../../script/baseConfig.js" type="text/javascript"></script>
    <script src="../../../script/utils.js" type="text/javascript"></script>
    <script src="../../../script/common.js" type="text/javascript"></script>
    <style>
        body{
            background:rgba(0,0,0,0);
        }
    </style>
</head>
<body>
    <div id="app" v-cloak>
        <section class="comPop flexColumnEnd m-invitePop" @click="closeMe();">
            <div class="u-wrap">
                <div class="flex1 flex hdAmend" @click.stop="">
                    <div @click="shareByWX('session')" class="_hdWrap flexColumnCenter">
                        <div class="_icoWrap">
                            <img class="downloadIco" src="../../../image/invite/wx_ico.png" />
                        </div>
                        <div class="_spec">发给朋友</div>
                    </div>
                    <div @click="shareByWX('timeline')" class="_hdWrap flexColumnCenter">
                        <div class="_icoWrap">
                            <img class="downloadIco" src="../../../image/invite/friends.png" />
                        </div>
                        <div class="_spec">分享朋友圈</div>
                    </div>
                    <div @click="shareByQQ" class="_hdWrap flexColumnCenter">
                        <div class="_icoWrap">
                            <img class="copyIco"src="../../../image/invite/qq_ico.png" />
                        </div>
                        <div class="_spec">发送给QQ好友</div>
                    </div>
                    <div @click="copyIviteUrl" class="_hdWrap flexColumnCenter">
                        <div class="_icoWrap">
                            <img class="copyIco"src="../../../image/invite/copy_ico.png" />
                        </div>
                        <div class="_spec">复制链接</div>
                    </div>
                </div>
                <div class="_close" :style="{'padding-bottom':(api.safeArea.bottom + 'px')}">取消</div>
            </div>
        </section>
    </div>
    <script type="text/javascript">
        apiready = function() {
            var wxPlus = api.require('wxPlus');
            var QQ = api.require('QQPlus');
            var clipBoard = api.require('clipBoard');

            var app = new Vue({
                el:'#app',
                data:{
					iosTest:false,
                    url: CONFIG.httpConfig.web[CONFIG.env],
                },
                created() {
                    this.taskId = api.pageParam.taskId;
                    this.url = CONFIG.httpConfig.web[CONFIG.env]+'/task_detail?share=app&id='+this.taskId;
                },
                methods:{
                    closeMe(){
                        api.closeFrame();
                    },
                    shareByWX(type){
                        var _this = this;
						wxPlus.shareWebpage({
						    scene: type,
						    title: CONFIG.constants.SHARE_WX_TITLE_TASK,
						    description: CONFIG.constants.SHARE_WX_DESCRIPTION_TASK,
						    contentUrl: _this.url,
							thumb: CONFIG.constants.SHARE_WX_IMG_TASK,
						}, function(ret, err) {
						    _this.closeMe();
						});
                    },
                    shareByQQ(){
                        var _this = this;
                        QQ.shareNews({
                            url: _this.url,
                            title: CONFIG.constants.SHARE_QQ_TITLE_TASK,
                            description: CONFIG.constants.SHARE_QQ_DESCRIPTION_TASK,
                            imgUrl: CONFIG.constants.SHARE_QQ_IMG_TASK,
                            type: 'QFriend'
                        },function(ret,err){
                            if (ret.status){
								_this_this.closeMe();
                                $.toast("分享成功！");
                            }
                        });
                    },
                    copyIviteUrl(){
						var that = this;
                        clipBoard.set({
                            value: this.url
                        }, function(ret, err) {
                            if (ret && ret.status) {
                                $.toast('链接已复制');
								that.closeMe();
                            }else{
								$.toast('复制失败');
							}
                        });
                    }
                },
                mounted(){
					$.initJs(this);
                }
            });
        }
    </script>
</body>
</html>
